/*
 * @Author: 康为 18037890117@163.com
 * @Date: 2023-07-06 13:21:07
 * @LastEditors: 康为 18037890117@163.com
 * @LastEditTime: 2023-07-10 14:56:06
 * @FilePath: /umi-max/src/framework/Card/CardBody/index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import * as React from 'react';
import { useState, Suspense, lazy, ElementType } from 'react';
import { CardFrameProps } from '../index';
import classNames from 'classnames';
import styles from './index.less';

interface CardBodyProps
  extends Pick<
    CardFrameProps,
    'cardType' | 'settings' | 'loading' | 'hasPermission'
  > {
  cardBodyClassName?: string;
}

const Loadable = (Component: ElementType) => (props: any) => {
  return (
    <Suspense fallback={null}>
      <Component {...props}></Component>
    </Suspense>
  );
};

function CardBody(props: CardBodyProps) {
  const { cardType, cardBodyClassName, hideHeader } = props;
  const [InnerComponent, setInnerComponent] = useState<JSX.Element | null>(
    null,
  );

  React.useEffect(() => {
    const newInnerComponent = lazy(() => import(`@/modules/Cards/${cardType}`));
    setInnerComponent(React.createElement(newInnerComponent, props));
  }, []);
  return (
    <div className={classNames(styles.cardBody, cardBodyClassName)}>
      {InnerComponent}
      {/* {Loadable(InnerComponent)} */}
    </div>
  );
}

export default CardBody;
